<template>
  <view v-if="visible" class="exportStatus" @click="goExportRecord">
    <template v-if="loadingItem">
      <view class="loadEffect scale">
        <text v-for="item in 8" :key="item" class="text" :class="`text${item}`"></text>
      </view>
      <view class="fz-10">
        {{ loadingItem.taskType === ServiceFormExportTypeEnum.EXPORT ? '导出' : '导入'}}中
      </view>
    </template>
    <template v-else>
      <icon class="ali-icon icon-xuanzhong scale" />
      <view class="fz-10">查 看</view>
    </template>
  </view>
</template>

<script lang="ts" setup>
  import { navigateTo } from '@/router';
  import { useAdminStoreWithOut } from '@/store/modules/admin';
  import { storeToRefs } from 'pinia';
  import { computed, ref, unref, watch } from 'vue';
  import { ServiceFormExportTypeEnum, ServiceFormExportStatusEnum } from '@/enums/serviceFormEnum';
  import type { ServiceFormExportDetail } from '@/api/serviceForm/types';

  const pages = getCurrentPages();
  const { route } = pages[pages.length - 1];
  const isHide = computed((): boolean => {
    return route === 'pages/serviceForm/exportRecord/main';
  });

  // 判断队列中是否存在导出中任务
  const useAdmin = useAdminStoreWithOut();
  const { taskQueuesList } = storeToRefs(useAdmin);
  const visible = ref<boolean>(false);
  const loadingItem = ref<ServiceFormExportDetail>(); // 进行中任务

  watch(() => taskQueuesList.value, (newValue) => {
    visible.value = !unref(isHide) && !!newValue.length; // 是否显示悬浮球, 在任务列表页或者无任务不显示
    loadingItem.value = newValue.find(v=> v.exportStatus === ServiceFormExportStatusEnum.CREATED || v.exportStatus === ServiceFormExportStatusEnum.PROCESSING);
  }, {deep: true});

  /** 表单导出记录列表 */
  function goExportRecord() {
    // 统一在任务列表处清除队列中的已完成任务,否则该悬浮球无法判断显示隐藏
    navigateTo({ name: 'exportRecord' });
  }
</script>

<style lang="scss" scoped>
  .exportStatus {
    position: fixed;
    z-index: 100;
    right: 30rpx;
    bottom: 400rpx;
    width: 96rpx;
    height: 96rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 50%;
    box-shadow: 0px 11rpx 54rpx 3rpx rgba(200, 200, 200, 0.5);
    background: linear-gradient(360deg, #2878ff 0%, #7bacff 100%);
    color: #ffffff;
  }

  @keyframes load {
    0% {
      opacity: 1;
    }
    20% {
      opacity: 1;
    }
    100% {
      opacity: 0.1;
    }
  }

  .scale {
    transform: scale(0.8);
  }
  .loadEffect {
    width: 40rpx;
    height: 40rpx;
    position: relative;
    transform: scale(0.8);
    margin-top: 12rpx;
    .text {
      display: inline-block;
      width: 12rpx;
      height: 4rpx;
      border-top-left-radius: 4rpx;
      border-bottom-left-radius: 4rpx;
      background: #ffffff;
      position: absolute;
      animation: load 1.04s ease infinite;
    }

    .text1 {
      left: 0;
      top: 50%;
      margin-top: -2rpx;
      animation-delay: 0.13s;
    }
    .text2 {
      left: 5rpx;
      top: 8rpx;
      transform: rotate(45deg);
      animation-delay: 0.26s;
    }
    .text3 {
      left: 50%;
      top: 4rpx;
      margin-left: -6rpx;
      transform: rotate(90deg);
      animation-delay: 0.39s;
    }
    .text4 {
      top: 8rpx;
      right: 4rpx;
      transform: rotate(135deg);
      animation-delay: 0.52s;
    }
    .text5 {
      right: 0;
      top: 50%;
      margin-top: -2rpx;
      transform: rotate(180deg);
      animation-delay: 0.65s;
    }
    .text6 {
      right: 4rpx;
      bottom: 8rpx;
      transform: rotate(225deg);
      animation-delay: 0.78s;
    }
    .text7 {
      bottom: 4rpx;
      left: 50%;
      margin-left: -6rpx;
      transform: rotate(270deg);
      animation-delay: 0.91s;
    }
    .text8 {
      bottom: 8rpx;
      left: 4rpx;
      transform: rotate(315deg);
      animation-delay: 1.04s;
    }
  }
</style>
